<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=building-width, initial-scale=1, maximum-scale=1">
    <% include("/templates/common/header.html"){} %>
    <!-- jqgrid-->
    <link href="${ctxPath!}/css/bootstrap.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath!}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath!}/jqgrid/jqgrid.css" rel="stylesheet">
    <style>
        .ui-jqgrid-btable tbody tr td{
            vertical-align: middle!important;
        }
    </style>
</head>
<body>
    <div class="content-search">
        <div class="content-search">
            <form action="${ctxPath!}/sys/worker/download" id="download" method="GET"></form>
            <form id="search" class="layui-form layui-form-pane" lay-filter="form">
                <div class="layui-inline" style="margin-left: 10px;">
                    <div class="layui-input-inline">
                        <select name="workerLevel" id="workerLevel" lay-filter="workerLevel">
                            <option value="">请选择等级</option>
                            <%
                            for(workerLevel in workerLevels!){
                            %>
                            <option value="${workerLevel.id}">${workerLevel.name}</option>
                            <%
                            }
                            %>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 10px;">
                    <div class="layui-input-inline">
                        <select name="education" id="education" lay-filter="education">
                            <option value="">请选择学历</option>
                            <%
                            for(education in educations!){
                            %>
                            <option value="${education.value}">${education.desc}</option>
                            <%
                            }
                            %>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 10px;padding: 12px;">
                    <div class="layui-input-inline">
                        <input type="text" id="keyword" autocomplete="off" class="layui-input" placeholder="请输入关键字" onchange="search()">
                    </div>
                </div>
                <div class="layui-inline">
                    <atom:auth type="button" perm="sys:worker:edit"  iconText="&#xe615;" onclick="return search();" text=" 搜索"/>
                </div>
                <div class="layui-inline">
                    <atom:auth type="button" perm="sys:worker:edit" iconText="&#xe654;" onclick="return add();" text="添加职员"/>
                </div>
                <div class="layui-inline">
                    <atom:auth type="button" perm="sys:worker:download" iconText="&#xe654;" onclick="return getExcel();" text="获取模板excel"/>
                </div>
                <div class="layui-inline" >
                    <atom:auth type="button" perm="sys:worker:upload" iconText="&#xe654;" onclick="return excel();" text="批量添加职员"/>
                </div>
                <div class="layui-inline" style="padding-left:15px;">
                    <atom:auth type="button" perm="sys:worker:edit"  iconText="&#xe615;" onclick="return deleteAll();" text=" 批量删除"/>
                </div>
            </form>
        </div>

    </div>
        <!-- 内容主体区域 -->
    <div style="padding: 2px;">
        <div class="jqGrid_wrapper">
            <table id="table"></table>
            <div id="pager" ></div>
        </div>
    </div>
</div>
<script src="${ctxPath!}/jquery/jquery.min.js?v=2.2.4"></script>
<script src="${ctxPath!}/jquery/jquery.form.js?v=3.50.0"></script>
<script src="${ctxPath!}/jqgrid/i18n/grid.locale-cnffe4.js?0820"></script>
<script src="${ctxPath!}/jqgrid/jquery.jqGrid.minffe4.js?0820"></script>
<script src="${ctxPath!}/jqgrid/frozen.js?v=1.0.1"></script>
<script src="${ctxPath!}/jqgrid/myjqGrid.js"></script>
<script src="${ctxPath!}/layui/layui.js"></script>
<script>

    layui.use('form', function(){
    });

    var colNames = ["ID","职员名称" ,"籍贯","年龄","住址","邮箱","操作"];
    var colModel = [{
        name : "id",
        index : "id",
        width : 50,
        hidden: true,
        align : "left"
    },{
        name : "username",
        index : "username",
        sortable : false,
        width : 50,
        align : "center"
    },{
        name : "nativePlace",
        index : "nativePlace",
        sortable : false,
        width : 50,
        align : "center"
    },{
        name : "age",
        index : "age",
        sortable : false,
        width : 50,
        align : "center"
    },{
        name : "address",
        index : "address",
        sortable : false,
        width : 50,
        align : "center"
    },{
        name : "email",
        index : "email",
        sortable : false,
        width : 50,
        align : "center"
    },{
        name : "action",
        index : "action",
        width : 150,
        title:false,
        editable:true,
        align : "center",
        formatter : function(cellvalue, options, rowdata){
            var html = '<atom:auth type="button" perm="sys:worker:edit" extClass="btn-edit" iconText="&#xe642;" dataId="' + rowdata.id + '" text="编辑职员" />'+
                    '<atom:auth type="button" perm="sys:worker:delete" extClass="btn-del layui-bg-red" iconText="&#xe640;" dataId="' + rowdata.id + '" text="删除职员" />';
            return html;
        }
    }];

    //新建一个数组，存放已勾选的id
    var SelectList = []//(用于记录被选中的行)



    var myJqGrid = null;
    $(document).ready(function () {
        myJqGrid = new MyJqGrid({
            jqGrid_id: 'table',
            data: "${ctxPath!}/sys/worker/list.json",
            isSubGrid: false,
            autowidth: true,
            shrinkToFit: true,
            autoScroll: true,
            colNames: colNames,
            colModel: colModel,
            onSelectAll: function (aRowids, status) {
                if (status) {
                    for (var i = 0; i < aRowids.length; i++) {
                        if (SelectList.indexOf(aRowids[i]) == -1) {//每一次勾选时，检查该行是否在SelectList中，
                            //若在，则在SelectList中删除该记录
                            //（翻页也会触发onselect事件，所以需检查该行是否在unselects中）
                            SelectList.push(aRowids[i]);
                        }
                    }
                } else {
                    for (var i = 0; i < aRowids.length; i++) {
                        if (SelectList.indexOf(aRowids[i]) > -1) {//每一次勾选时，检查该行是否在SelectList中，
                            //若在，则在SelectList中删除该记录
                            //（翻页也会触发onselect事件，所以需检查该行是否在unselects中）
                            SelectList.splice($.inArray(aRowids[i], SelectList), 1)
                        }
                    }
                }
            },
            gridComplete: function () {
                var ids = $("#table").jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {
                    if ((SelectList.indexOf(ids[i]) > -1)) {
                        $("#table").jqGrid('setSelection', ids[i]);
                    }
                }
            },
            onSelectRow: function (rowid, status) {
                if (status) { // 每一次取消选中时，将该行id添加到SelectList中
                    if (SelectList.indexOf(rowid) == -1) {//每一次勾选时，检查该行是否在SelectList中，
                        //若在，则在SelectList中删除该记录
                        //（翻页也会触发onselect事件，所以需检查该行是否在unselects中）
                        SelectList.push(rowid);
                    }
                } else {
                    if (SelectList.indexOf(rowid) > -1) {//每一次勾选时，检查该行是否在SelectList中，
                        //若在，则在SelectList中删除该记录
                        //（翻页也会触发onselect事件，所以需检查该行是否在unselects中）
                        SelectList.splice($.inArray(rowid, SelectList), 1)
                    }
                }
            }
        })
    });

    function search(){
        myJqGrid.reloadGrid({"workerLevel":$("#workerLevel").val(),"education":$("#education").val(),"keyword":$("#keyword").val()});
        return false;
    }

    function add() {
        //弹出即全屏
        var index =layer.open({
            title: '添加职员',
            type: 2,
            content: '${ctxPath!}/sys/worker/edit',
            maxmin: true
        });
        layer.full(index);
        return false;
    }
    function excel() {
        layer.open({
            title: '批量添加职员',
            type: 2,
            area: ['500px', '400px'],
            content: '${ctxPath!}/sys/worker/excel'
        });
        return false;
    }

    function deleteAll() {
        var ids=SelectList.join(",");
        layer.confirm('确定删除选中职员吗？', {
            icon: 3,
            btn: ['确定','取消'] //按钮
        }, function(){ //确定
            var params = {"ids":ids};
            $.post("${ctxPath!}/sys/worker/delete", params, function(data){
                if(data.status == 200){
                    layer.alert(data.msg, {
                        icon: 1,
                        skin: 'layer-ext-moon'
                    },function () {
                        search();
                        layer.closeAll();
                    });
                }else{
                    layer.alert(data.msg, {
                        icon: 2,
                        skin: 'layer-ext-moon'
                    });
                }
            });
        }, function(){ //取消
        });
    }
    
    $(function(){

        $(document).on("click", ".btn-edit", function (e) {
            var index =layer.open({
                title: '编辑职员',
                type: 2,
                content: '${ctxPath!}/sys/worker/edit?id='+$(this).data("id"),
                maxmin: true
            });
            layer.full(index);

        });

        $(document).on("click", ".btn-org", function (e) {
            layer.open({
                title: '机构设置',
                type: 2,
                area: ['500px', '350px'],
                content: '${ctxPath!}/sys/worker/org?id='+$(this).data("id")
            });
        });



        $(document).on("click", ".btn-del", function (e) {
            var id = $(this).data("id");
            layer.confirm('确定删除该职员吗？', {
                icon: 3,
                btn: ['确定','取消'] //按钮
            }, function(){ //确定
                var params = {"ids":id};
                $.post("${ctxPath!}/sys/worker/delete", params, function(data){
                    if(data.status == 200){
                        layer.alert(data.msg, {
                            icon: 1,
                            skin: 'layer-ext-moon'
                        },function () {
                            search();
                            layer.closeAll();
                        });
                    }else{
                        layer.alert(data.msg, {
                            icon: 2,
                            skin: 'layer-ext-moon'
                        });
                    }
                });
            }, function(){ //取消
            });
        });
    });
    function getExcel() {
        $('#download').submit();
        return false;
    }
</script>
</body>
</html>